<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				width: 500px;
				margin: 20px auto;
			}

			input,
			textarea {
				outline: none;
			}

			textarea {
				resize: none;
			}

			img {
				width: 50px;
				vertical-align: middle;
			}

			.z {
				background-color: hotpink;
				margin: 40px auto;
				width: 200px;
				height: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.x {
				background-color: hotpink;
				margin: 40px auto;
				width: 179px;
				height: 64px;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				-webkit-line-clamp: 3;
				/* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
		</style>
	</head>
	<body>
		<h1>鼠标的用户样式</h1>
		<ul class="a">
			<li style="cursor: default;">鼠标的默认样式</li>
			<li style="cursor: pointer;">鼠标的小手样式</li>
			<li style="cursor: move;">鼠标的move样式</li>
			<li style="cursor: text;">鼠标的文本样式</li>
			<li style="cursor: not-allowed;" ;>鼠标的not-allowed</li>
		</ul>
		<h1>表单的用户样式</h1>
		1.取消文本框的边框
		<input type="text">
		2.取消文本域的拖拽效果
		<textarea name="" id="" cols="30" rows="10"></textarea>
		文本域防止选中前有空白，标签尽量写在一行
		<br>
		<br>
		<br>
		3.实现图片和文字垂直居中对齐，vertical-align属性,baseline基线，top顶线，bottom底线，middle中线.

		<br>
		设置一个元素的垂直对齐方式，但是这个属性只针对行内元素或者行内块元素
		<br>
		<br>
		<img src="../images/2.jpg" alt="">蓝天阳光
		<br>
		4.图片底部空白缝隙的问题，因为图片和文字对齐方式默认是基线对齐，所以底部会有空隙预留给文字底线下的部分
		解决方法：
		<ol>
			<li>设置图片文字对齐方式不是基线对齐就可以（推荐使用）</li>
			<li>设置图片转换为块元素</li>
		</ol>
		5.单行文字溢出显示省略号的办法：
		<ul>
			<li>首先强制让文本在一行内显示 white-space:nowrap</li>
			<li>然后让溢出的文本隐藏 overflow:hidden</li>
			<li>设置文本超出显示省略号 text-overflow:ellipsis</li>
		</ul>
		<div class="z">
			牛逼牛逼，卢本伟牛逼，牛逼狠人
		</div>
		6.多行文字溢出显示省略号的办法：有较大的兼容性问题，所以了解即可，一般只支持web-kit浏览器或者移动端,这个要严格控制盒子大小，比较鸡肋
		<div class="x">
			牛逼牛逼，卢本伟牛逼，牛逼狠人牛逼牛逼，卢本伟牛逼，牛逼狠人,牛逼牛
		</div>
	</body>
</html>
